<template>
  <el-form ref="form" :model="user" :rules="rules" label-width="80px">
    <el-form-item label="姓名" prop="staffName">
      <el-input v-model="user.staffName" clearable maxlength="30" :disabled="!checkPermiDisabled" />
    </el-form-item>
    <el-form-item label="工号" prop="staffNo">
      <el-input v-model="user.staffNo" disabled maxlength="30"  clearable placeholder="工号" />
    </el-form-item>
    <el-form-item :label="isHoAdminTitle" prop="hospitalId" v-if="!isCoAdminOrManager">
      <el-select style="width: 100%;" disabled v-model="user.hospitalId" clearable :placeholder="isHoAdminTitle">
        <el-option
          v-for="item in hospitalList"
          :key="item.hospitalId"
          :label="item.name"
          :value="item.hospitalId"
        />
      </el-select>
    </el-form-item>
<!--    <el-form-item label="岗位" prop="postName">-->
<!--      <el-input v-model="user.postName" maxlength="30" disabled readonly placeholder="岗位" />-->
<!--    </el-form-item>-->
    <el-form-item label="性别" prop="gender">
      <el-select style="width: 100%;" v-model="user.gender" clearable placeholder="性别">
        <el-option
          v-for="item in dict.type.sys_user_sex"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="手机号码" prop="phoneNumber">
      <el-input v-model="user.phoneNumber" clearable maxlength="30" />
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="user.email" clearable maxlength="50" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="mini" @click="submit">保存</el-button>
      <el-button type="danger" size="mini" @click="close">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {updateUserProfile} from "@/api/system/user";
import { listHospital } from "@/api/hospital/hospital";
import { validEmail, validPhone } from '@/utils/validate'
import { checkPermi } from '@/utils/permission'
import {DIC} from "@/const/dict"

export default {
  dicts: ['sys_user_sex'],
  props: {
    user: {
      type:Object
    }
  },
  computed: {
    role() {
      return this.$store.getters.roles?.[0]
    },
    roles(){ return DIC.role },
    isCoAdminOrManager(){
      const role = this.role
      return role === this.roles[6].enLabel || role === this.roles[2].enLabel
    },
    isHoAdminTitle(){
      return this.role === this.roles[7].enLabel ? '所属医院' : '驻点医院'
    }

  },
  data() {
    return {
      // 医院列表
      hospitalList: [],
      // 表单校验
      rules: {
        staffName: [
          { required: true, message: "姓名不能为空", trigger: "blur" }
        ],
        staffNo: [
          { required: true, message: "工号不能为空", trigger: "blur" }
        ],
        gender: [
          { required: true, message: "性别不能为空", trigger: "blur" }
        ],
        postName: [
          { required: true, message: "人员类型不能为空", trigger: "blur" }
        ],
        hospitalId: [
          { required: true, message: this.isHoAdminTitle + "不能为空", trigger: "blur" }
        ],
        phoneNumber: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          { validator: (rule, value, callback) => {
              if (!value) return callback()
              if (!validPhone(value)) return callback(new Error('请输入正确的手机号码'))
              callback()
            }, trigger: 'blur' }
        ],
        email: [
          { validator: (rule, value, callback) => {
              if (!value) return callback()
              if (!validEmail(value)) return callback(new Error('请输入正确的邮箱地址'))
              callback()
            }, trigger: 'blur' }
        ],
      }
    };
  },
  created() {
    this.getHospitalList()
  },
  methods: {
    checkPermiDisabled(){
      return checkPermi(['basic:staff:edit'])
    },
    /** 获取医院列表 */
    getHospitalList() {
      listHospital().then(res => {
        this.hospitalList = res.rows
      })
    },

    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          updateUserProfile(this.user).then(response => {
            this.$modal.msgSuccess("修改成功");
          });
        }
      });
    },
    close() {
      this.$tab.closePage();
    }
  }
};
</script>
